<template>
	<article class="kp-accountLink" v-bind:style="{ height: pageHeight+'px' }">
		<div class="kp-al-box">
			<div class="kp-mb-li mt-20" @click="help(1)">
				<a>
					<span>酒店问题</span>
					<p></p>
				</a>
			</div>
			<div class="kp-mb-li" @click="help(2)">
				<a>
					<span>火车问题</span>
					<p></p>
				</a>
			</div>
			<div class="kp-mb-li" @click="help(3)">
				<a>
					<span>景区问题</span>
					<p></p>
				</a>
			</div>
			<div class="kp-mb-li" @click="help(4)">
				<a>
					<span>汽车问题</span>
					<p></p>
				</a>
			</div>
		</div>
	</article>
</template>

<script>
	import { XInput, Group, XButton } from 'vux'
	export default {
		data() {
			return {
				pageHeight: '',
			}
		},
		mounted() { //载入后执行
			var h = document.documentElement.clientHeight || document.body.clientHeight;
			this.pageHeight = h;
		},
		created() { //创建后

		},
		watch: { //监听放置
		},
		methods: { //方法放置
			help(index){
				this.$router.push({
					path:'/my/helpProblem',
					query:{
						'help':index
					}
				})
			}
		},
		components: {
			XInput,
			Group,
			XButton
		}
	}
</script>

<style scoped>
	/* //手机号部分 */
	
	.kp-accountLink {
		background: #f4f5f9;
	}
	
	.kp-al-box {
		padding-top: 86px;
	}
	
	.kp-mb-li {
		height: 99px;
		display: flex;
		background: #fff;
		margin-bottom: 2px;
	}
	
	.kp-mb-li span {
		padding-right: 38px;
		display: inline-block;
		font-size: 34px;
		color: rgb(51, 51, 51);
		line-height: 99px;
	}
	
	.kp-mb-li a {
		display: flex;
		width: 100%;
		padding: 0 30px;
	}
	
	.kp-mb-li p {
		flex: 1;
		font-size: 28px;
		color: rgb(183, 183, 183);
		line-height: 99px;
		text-align: right;
		padding-right: 22px;
		background: url(../../../assets/right-1.png) no-repeat right center;
		background-size: 14px 26px;
	}
</style>